<template>
	<view class="h-200  w-full rounded">

		<view class="flex justify-between h-200">


			<view class="flex flex-col bg-gray-100 shadow-sm flex-1 justify-around items-start wrap">
				<view class="">
					<span class="text-sm text-white  bg-yellow-900 rounded px-20 py-10 mr-10 ">
						{{voucher.name}}
					</span>
					<span class="overflow-ellipsis text-xs">{{voucher.description}}</span>
				</view>
				<view class="text-gray-600">
					状态：{{voucher.statusTitle}}
				</view>
				<view class="text-gray-600 text-xs bg-gray-200 px-10 rounded">
					流通：{{voucher.times}}次
					有效期截止：{{voucher.overtime}}
				</view>
			</view>
			<view class="font-bold  w-200 bg-yellow-600
			             flex flex-col justify-center items-center">
				<span class="text-white">￥
					<span class="text-2xl">{{voucher.amount}}</span>
				</span>

				<button type="danger" size="mini" @click="update" class="rounded-xl">
					<span class="text-yellow-600">立即使用</span>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			voucher: {
				type: Object
			}
		},
		data() {
			return {

			}
		},
		methods: {
			update(voucher) {
				this.$emit('update', voucher)
			}
		}
	}
</script>

<style>

</style>
